<template>
  <div id="app">
    <template>
      <div>
        <!--页面头部分-->
        <header >
          <h5>昆山旅游度假区大数据中心</h5>
          <nav>
            <ul>
              <router-link to="/home1" tag="li"
                           v-bind:style="{ background: activeColor1 }"
                           @click.native="reverseColor1">经济指标</router-link>
              <router-link to="/home2" tag="li"
                           v-bind:style="{ background: activeColor2 }"
                           @click.native="reverseColor2">工业指标</router-link>
              <router-link to="/home3" tag="li"
                           v-bind:style="{ background: activeColor3 }"
                           @click.native="reverseColor3">固定资产投资</router-link>
              <router-link to="/home4" tag="li"
                           v-bind:style="{ background: activeColor4 }"
                           @click.native="reverseColor4">贸易及服务行业指标</router-link>
            </ul>
          </nav>
        </header>
      </div>

      <template>
      </template>


    </template>
    <router-view/>
  </div>
</template>

<style>
@import "views/css/demo.css";
</style>

<script>
export default {
  name: 'App',
  methods: {
    reverseColor1: function () {
          this.activeColor1 = 'rgba(19, 58, 167, 0.72)',
          this.activeColor2 = 'transparent',
          this.activeColor3 = 'transparent',
          this.activeColor4 = 'transparent'
    },
    reverseColor2: function () {
      this.activeColor1 = 'transparent',
          this.activeColor2 = 'rgba(19, 58, 167, 0.72)',
          this.activeColor3 = 'transparent',
          this.activeColor4 = 'transparent'
    },
    reverseColor3: function () {
      this.activeColor1 = 'transparent',
          this.activeColor2 = 'transparent',
          this.activeColor3 = 'rgba(19, 58, 167, 0.72)',
          this.activeColor4 = 'transparent'
    },
    reverseColor4: function () {
      this.activeColor1 = 'transparent',
          this.activeColor2 = 'transparent',
          this.activeColor3 = 'transparent',
          this.activeColor4 = 'rgba(19, 58, 167, 0.72)'
    },
  },
  data() {
    return {
      selectedMonth: null,
      activeColor1: 'rgba(19, 58, 167, 0.72)',
      activeColor2: 'transparent',
      activeColor3: 'transparent',
      activeColor4: 'transparent',
    }
  }
}
</script>
